<template>
  <div>
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>用户表</span>
        <el-button type="text" @click="showAddRowDialog">添加member</el-button>
      </div>
      <el-table :data="memberList" border v-loading="loadingTable">
        <el-table-column
          label="序号"
          type="index"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column
          prop="uid"
          label="uid"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="avatar"
          label="avatar"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="nickname"
          label="nickname"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="platform"
          label="platform"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="createTime"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="updateTime"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="dataState"
          label="dataState"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="lastVersion"
          label="lastVersion"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createUserId"
          label="createUserId"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="primary" @click="onEditRow(scope.row)"
              >编辑
            </el-button>
            <el-button type="danger" @click="onDeleteRow(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
    <!--    编辑row对话框-->
    <el-dialog title="编辑member" :visible.sync="editRowVisible">
      <el-form :model="memberModel" label-position="left" label-width="120px">
        <el-form-item label="id">
          <el-input
            v-model="memberModel.id"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="uid">
          <el-input
            v-model="memberModel.uid"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="avatar">
          <el-input
            v-model="memberModel.avatar"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="nickname">
          <el-input
            v-model="memberModel.nickname"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="platform">
          <el-input
            v-model="memberModel.platform"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="createTime">
          <el-input
            v-model="memberModel.createTime"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="updateTime">
          <el-input
            v-model="memberModel.updateTime"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="dataState">
          <el-input
            v-model="memberModel.dataState"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="lastVersion">
          <el-input
            v-model="memberModel.lastVersion"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
        <el-form-item label="createUserId">
          <el-input
            v-model="memberModel.createUserId"
            placeHolder="请输入该字段"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editRowVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveRow">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addMember,
  getMemberByPage,
  removeMemberById,
  updateMemberById
} from "@/api/admin-api/MemberApi";

export default {
  name: "Member",
  data() {
    return {
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: 'create_time' }] //排序字段
      },
      editRowVisible: false,
      memberModel: {
        id: null,
        uid: null,
        avatar: null,
        nickname: null,
        platform: null,
        createTime: null,
        updateTime: null,
        dataState: null,
        lastVersion: null,
        createUserId: null
      },
      loadingTable: false,
      memberList: []
    };
  },
  methods: {
    onPaging(currentPage) {
      // 页码改变
      this.pageVo.current = currentPage;
      this.loadMemberList();
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageVo.size = val;
      this.loadMemberList();
    },
    onSaveRow() {
      //保存或更新
      if (this.memberModel.id) {
        //更新
        this.$loading();
        updateMemberById(this.memberModel)
          .then(() => {
            this.$message.success("操作成功");
            this.loadMemberList();
            this.$loading().close();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      } else {
        //保存
        this.$loading();
        addMember(this.memberModel)
          .then(() => {
            this.$message.success("操作成功");
            this.$loading().close();
            this.loadMemberList();
            this.editRowVisible = false;
          })
          .catch(() => {
            this.$loading().close();
          });
      }
    },
    showAddRowDialog() {
      //显示添加行对话框
      this.editRowVisible = true;
      this.memberModel = this.$options.data().memberModel;
    },
    loadMemberList() {
      this.loadingTable = true;
      getMemberByPage(this.pageVo)
        .then(data => {
          this.memberList = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    },
    onEditRow(row) {
      //编辑行
      this.memberModel = row;
      this.editRowVisible = true;
    },
    onDeleteRow(row) {
      //删除行
      this.$confirm("确定要删除当前行吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$loading();
        removeMemberById(row.id)
          .then(() => {
            this.loadMemberList();
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    }
  },
  mounted() {
    this.loadMemberList();
  }
};
</script>
<style scoped></style>
